<template>
  <div>
    <van-nav-bar fixed title="国内期货" right-text="切换" @click-right="showPopup = true">
      <template #left>
        <timer-load v-if="!loading" url="/china_future/stamps/obtain" period="d" @confirm="onConfirm"/>
      </template>
    </van-nav-bar>
    <br/>
    <br/>
    <br/>
    <van-cell-group inset>
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in indexList" :key="item.symbol">
          <light-axis :data="item"
                      @confirm="$router.push(`/whole/future?sector=${item.sector}&title=${item.title}`)"/>
        </van-grid-item>
      </van-grid>
      <div style="margin: 0 16px 16px 16px;">
        <temper-chart :timestamp="queryParams.timestamp" url="/china_future/temper/obtain"/>
      </div>
    </van-cell-group>
    <van-cell-group inset style="margin-top: 8px;">
      <search-bar url="/china_future/symbol/obtain" @confirm="onSubmit"/>
      <br/>
      <van-row>
        <van-col span="8">
          <light-axis :data="activeData" style="margin: 33px 0"
                      @confirm="$router.push(`/whole/future/?sector=${activeData.sector}&title=${activeData.title}`)"/>
        </van-col>
        <van-col span="16">
          <description-list :columns="2" :data="targetData"/>
        </van-col>
      </van-row>
      <br/>
    </van-cell-group>
    <van-action-sheet v-model="showPopup" :actions="$types.marketTypes" @select="onSelect"/>
    <br/>
    <br/>
    <br/>
    <br/>
    <nav-bar path="/trend" @change="path => $router.push(`${path}/future`)"/>
  </div>
</template>

<script>
export default {
  components: {
    DescriptionList: () => import('@/components/DescriptionList.vue'),
    LightAxis: () => import('@/components/LightAxis.vue'),
    MarketLoad: () => import('@/components/MarketLoad.vue'),
    NavBar: () => import('@/components/NavBar.vue'),
    SearchBar: () => import('@/components/SearchBar.vue'),
    TemperChart: () => import('@/components/TemperChart.vue'),
    TimerLoad: () => import('@/components/TimerLoad.vue')
  },
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 3,
        order_by: 'symbol',
        timestamp: null,
        sort_direction: 1,
        period: 'd'
      },
      indexModule: {
        d: {
          symbol: {
            isin: ['emind', 'emcom', 'emagr']
          }
        },
        w: {}
      },
      activeData: {
        title: '橡胶2509',
        sector: 'future',
        market: 'SHFE',
        symbol: 'ru2509',
        change: 0,
        price: 0,
        value: 1
      },
      factorList: [],
      targetData: [],
      fieldList: ['d_state', 'd_trend', 'w_state', 'w_trend', 'm_state', 'm_trend'],
      indexList: [],
      showPopup: false,
      loading: true
    }
  },
  methods: {
    load(config, callback) {
      this.$requests.post('/china_future/entire/obtain', Object.assign({
        config: config,
        timestamp: this.$route.params.timestamp,
      }, this.queryParams)).then(resp => {
        callback(resp.datas)
      })
    },
    getValue(data) {
      if (data.d_state > 0 && data.w_state < 0) {
        return 1
      } else if (data.d_state > 0 && data.w_state > 0) {
        return 2
      } else if (data.d_state < 0 && data.w_state < 0) {
        return 3
      } else {
        return 4
      }
    },
    getFactorList() {
      this.$requests.post('/china_future/factor/obtain', {
        page: 1,
        limit: 1000,
        order_by: 'sequence',
        sort_direction: 1,
        enabled: true
      }).then(resp => {
        this.factorList = resp.datas
        this.loading = false
      })
    },
    getIndexList() {
      this.load(this.indexModule, resp => {
        this.indexList = resp.map(item => {
          return Object.assign({
            value: this.getValue(item),
            change: item.d_change,
            price: item.d_close
          }, item)
        })
      })
    },
    getFactors() {
      let tempObject = {}
      for (let j = 0; j < this.factorList.length; j++) {
        for (let i = 0; i < this.$types.periodTypes.length; i++) {
          if (this.factorList[j].typeof !== 'string') {
            let field = this.$types.periodTypes[i].value + '_' + this.factorList[j].field
            if (Object.hasOwnProperty.call(this.activeData, field)) {
              this.$set(tempObject, field, {
                title: this.$types.periodTypes[i].text + this.factorList[j].title,
                field: field,
                value: this.activeData[field],
                scale: this.factorList[j].typeof === 'integer' ? 0 : 3,
                unity: this.factorList[j].typeof === 'percentage' ? '%' : '',
                blurb: this.factorList[j].description
              })
            }
          }
        }
      }
      return tempObject
    },
    onSelect(item) {
      this.showPopup = false
      this.$router.push('/trend/' + item.value)
    },
    onSubmit(item) {
      this.load({
        d: {
          title: {
            eq: item.title
          }
        },
        w: {},
        m: {}
      }, resp => {
        if (resp.length > 0) {
          this.activeData = Object.assign({
            value: this.getValue(resp[0]),
            change: resp[0].d_change,
            price: resp[0].d_close
          }, resp[0])
          let tempObject = this.getFactors()
          this.targetData = this.fieldList.map(field => {
            return tempObject[field]
          })
        }
      })
    },
    onConfirm(value) {
      this.queryParams.timestamp = value
      this.onQuery()
    },
    onQuery() {
      this.getIndexList()
      this.onSubmit(this.activeData)
    }
  },
  mounted() {
    this.getFactorList()
  }
}
</script>
